<template>
  <div class="login">
    <van-form @submit="onSubmit">
      <van-field
        left-icon="friends-o"
        v-model="identity"
        placeholder="身份类别"
        :rules="[{ required: true, message: '请选择身份类别' }]"
        @focus="focus"
        readonly
      />
      <!-- <van-field
        left-icon="bag-o"
        v-if="type != null"
        v-model="collegeName"
        placeholder="学院"
        :rules="[{ required: true, message: '请选择学院' }]"
        @focus="academySelect"
        readonly
      /> -->
      <van-field
        left-icon="fire-o"
        v-model="name"
        placeholder="姓名"
        :rules="[{ required: true, message: '请填写姓名' }]"
      />
      <van-field
        :placeholder="type === 1 ? '学号' : '教师编号'"
        :rules="[{ required: true, message: `${type === 1 ? '学号' : '教师编号'}` }]"
        left-icon="bulb-o"
        v-model="number"
      />

      <div class="button">
        <van-button round block type="primary" native-type="submit" text="确认" />
        <!-- loading-text="加载中..." -->
      </div>
    </van-form>
    <van-action-sheet
      v-model:show="academyShow"
      :actions="academyList"
      @select="onMyAcadeList"
      cancel-text="取消"
    />

    <van-action-sheet
      v-model:show="typeShow"
      :actions="actions"
      @select="onSelect"
      cancel-text="取消"
    />
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "@vue/reactivity";
import { lists } from "../../data/userInfo";
import { userLogin } from "../../network/axios";
import { Notify } from "vant";
import { useRouter } from "vue-router";

export default {
  name: "Login",
  setup() {
    const router = useRouter();

    let userInfo = reactive({
      type: null,
      collegeName: "",
      number: "",
      name: "",
      collegeId: "",
    });
    let loading = ref(false);
    let academyShow = ref(false);
    const academyList = lists;
    const onMyAcadeList = (item) => {
      // 学院选择
      console.log(item);
      userInfo.collegeName = item.name;
      academyShow.value = false;
    };
    const academySelect = () => {
      academyShow.value = true;
    };
    let identity = ref("");
    let typeShow = ref(false);
    const focus = () => {
      typeShow.value = true;
    };
    const actions = [
      { name: "学生", type: 1 },

      { name: "教职工", type: 2 },
    ];
    const onSelect = (item) => {
      clearUserInfo();

      typeShow.value = false;
      userInfo.type = item.type;
      identity.value = item.name;
    };
    const clearUserInfo = () => {
      userInfo.type = NaN;
      userInfo.collegeName = "";
      userInfo.number = "";
      userInfo.name = "";
    };
    const confim = () => {
      //   console.log(999);
    };
    const onSubmit = async () => {
      console.log(userInfo);
      loading.value = true;
      const {
        data: { code, result, token },
      } = await userLogin(userInfo);
      if (code == 200) {
        Notify({
          type: "success",
          message: "登录成功",
        });
        localStorage.setItem("token", token);
        localStorage.setItem("type", userInfo.type);
        router.push({
          name: "Logo",
        });
      } else {
        Notify({
          type: "danger",
          message: `${result === null ? "该用户还未注册,请先注册用户" : result}`,
        });
      }
      loading.value = false;
      //   console.log(userInfo[collegeName], "onSubmit");
    };
    return {
      identity,
      typeShow,
      focus,
      actions,
      onSubmit,
      onSelect,
      confim,
      ...toRefs(userInfo),
      academySelect,
      academyList,
      onMyAcadeList,
      academyShow,
      loading,
    };
  },
};
</script>

<style lang="scss" scoped>
.login {
  margin-top: 0.25rem;
  padding: 0 0.25rem;
  ::v-deep .van-cell {
    margin-top: 10px;
  }
  ::v-deep .van-action-sheet {
    max-height: 40% !important;
  }
}
</style>
